import {defineComponent, onMounted, PropType, reactive, ref, toRaw} from "vue";
import "./index.less";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const Header = defineComponent((props) => {

  const store = useStore();

  const router = useRouter();

  const user = toRaw(store.state.user);

  const goWelcome = () => {
    router.push(`/welcome`);
  }

  return () => (
    <div class="header-big-box">
      <div class="left">
        <div class="title" onClick={goWelcome}>
          欢迎访问授权中心
        </div>
      </div>
      <div class="right">
        <div class="head-image-box">
          <img src={user.headImage} class="head-image" />
        </div>
        <div class="nick-name-box">
          { user.nickName || "-" }
        </div>
      </div>
    </div>
  );

});

export default Header;